'Promise'概念與詳細解析

'Promise'是JavaScript處理異步操作的一種方法，他是為了解決回調地獄（callback hell）的出現。它代表了一個尚未完成但最終會完成的操作，該操作只會有兩種結果，一是執行成功並返回結果，或是執行失敗並返回錯誤。

'Promise'的狀態

'Promise'有三種狀態：
1.Pending（進行中）：初始狀態，表示任務尚未完成，正在等待。
2.Fulfilled（已完成）：任務成功完成，並返回了結果。
3.Rejected（已拒絕）：任務失敗，並返回了錯誤。
** 值得注意的是，一旦'Promise'從Pending轉換為Fulfilled或Rejected，它的狀態就不能再變。

let promise = new Promise((resolve, reject) => {
    // 執行一些異步操作
    let success = true;  // 模擬操作狀態

    if (success) {
        resolve('Operation successful');  // 當成功時調用
    } else {
        reject('Operation failed');       // 當失敗時調用
    }
});

基本的'Promise'的方法

1.then:用於處理'Promise成功的結果。then()接收兩個回調函數，一個用於處理成功的情況，另一個可選的回調處理失敗的情況。

promise.then((result) => {
    console.log(result);  // 成功時執行
}, (error) => {
    console.error(error);  // 失敗時執行
});

2.catch:用於處理'Promise'的異常或錯誤，通常與then()一起使用來捕捉失敗狀況。

promise
  .then((result) => {
      console.log(result);
  })
  .catch((error) => {
      console.error(error);  // 處理錯誤
  });

3.finally():無論'Promise'成功還是失敗，finally()都會在結束時執行，並且它不會接收任何參數。

promise
  .then((result) => {
      console.log(result);
  })
  .catch((error) => {
      console.error(error);
  })
  .finally(() => {
      console.log('Promise 結束');
  });

'Promise'的鏈式調用

'Promise'允許進行鏈式調用，這意味著可以在一個then()之後再接著使用另一個then()，形成任務流程。在上一個then()中返回的值會繼續傳遞給下一個then()。

new Promise((resolve, reject) => {
    setTimeout(() => resolve(10), 1000);
})
    .then((result) => {
        console.log(result);  // 10
        return result * 2;
    })
    .then((result) => {
        console.log(result);  // 20
        return result * 3;
    })
    .then((result) => {
        console.log(result);  // 60
    })
    .catch((error) => {
        console.error('Error:', error);
    });

常見的'Promise'的靜態方法

1.Promise.all(): 同時執行多個'Promise'，並且當所有'Promise'都完成時會返回一個包含所有結果的Promise。如果其中任何一個'Promise'失敗，則整個'Promise.all()'會立即失敗。

let p1 = Promise.resolve(1);
let p2 = new Promise((resolve) => setTimeout(() => resolve(2), 1000));
let p3 = Promise.resolve(3);

Promise.all([p1, p2, p3])
  .then((results) => {
      console.log(results);  // [1, 2, 3]
  })
  .catch((error) => {
      console.error(error);
  });

2.Promise.race():只返回最先完成的'Promise'，無論他是成功還是失敗。

let p1 = new Promise((resolve) => setTimeout(() => resolve('First'), 1000));
let p2 = new Promise((resolve) => setTimeout(() => resolve('Second'), 2000));

Promise.race([p1, p2])
  .then((result) => {
      console.log(result);  // 'First'
  })
  .catch((error) => {
      console.error(error);
  });

3.Promise.allSettled(): 當所有'Promise'無論是成功或是失敗都已經完成時，返回一個包含每個'Promise' 結果的陣列。

let p1 = Promise.resolve(1);
let p2 = Promise.reject('Error');
let p3 = Promise.resolve(3);

Promise.allSettled([p1, p2, p3])
  .then((results) => {
      console.log(results);
      // [{status: 'fulfilled', value: 1}, {status: 'rejected', reason: 'Error'}, {status: 'fulfilled', value: 3}]
  });

4.Promise.any():返回第一個成功的'Promise'，如果所有'Promise'都失敗，則返回一個拒絕結果的'Promise'。

let p1 = Promise.reject('Error 1');
let p2 = Promise.resolve('Success');
let p3 = Promise.reject('Error 2');

Promise.any([p1, p2, p3])
  .then((result) => {
      console.log(result);  // 'Success'
  })
  .catch((error) => {
      console.error(error);  // 如果所有都失敗，這裡才會執行
  });